<template>
	<view class="homeLayout pageBg">
		<!-- 自定义头部导航 -->
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<!-- 轮播区 -->
		<view class="banner">
			<!-- autoplay:自动轮播  circular:衔接 -->
			<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay circular>
				<swiper-item>
					<image src="../../common/images/small000007lbN3I1723046407.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/images/small005113rurYk1721494273.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/images/small212952Pgfbj1722000592.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 公告区 -->
		<view class="notice">
			<!-- 左 -->
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			
			<!-- 中 -->
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in notice">{{item}}</swiper-item>
				</swiper>
			</view>
			
			<!-- 右 -->
			<view class="right">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="select">
			
			<!-- 症状 -->
			<view class="symptomContent">
				症状入口
			</view>
			
			<!-- 相关书籍 -->
			<view class="bookContent">
				中医文献入口
			</view>
			
		</view>
		
		<view class="common-title">
		    <view class="name">修生养性</view>
		</view>
		
        <!-- <view class="themeItem">
			<view class="box" v-for="item in 10">
				<image class="pic" src="@/common/images/small212952Pgfbj1722000592.jpg" mode="aspectFill"></image>
				<view class="mask">{{item.name}}</view>
			</view>
        	
        	
        	<!-- 更多(分类页面) -->

        	<!-- <view class="box">
        		<image class="pic" src="../../common/images/small211830eJKkT1721135910.jpg" mode="aspectFill"></image>
        		<view class="mask">
        			<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
        			<view class="text">更多</view>
        		</view>
        	</view>
        	
        </view> --> 
				
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
import {apiGetDayRandom,apiGetClassify} from '@/api/apis.js'
//公告内容
const notice = ref(['本项目由岭南师范乔老师领导','董劳模'])
const randomList = ref([])
const classifyList = ref([])

//跳转到预览页面
const goPreview = (id)=>{
	console.log(id)
	//let randomList = uni.getStorageSync("storgClassList")
	uni.setStorageSync("storgClassList",randomList.value)
	uni.navigateTo({
		url:'/pages/preview/preview?id='+id
	})
}

//生成每日9张随机数
const getDayRandom = async ()=>{
	let res = await apiGetDayRandom()
	randomList.value = res.data
}

//获取分类
const getClassify = async ()=>{
	let res = await apiGetClassify()
	classifyList.value = res.data
}

//分享给好友
onShareAppMessage(()=>{
	return {
		title:'每日推荐',
		path:'/pages/index/index'
	}
})

//分享到朋友圈
onShareTimeline(()=>{
	return {
		title:'每日推荐',
		path:'/pages/index/index'
	}
})


getDayRandom()
getClassify()

</script>

<style lang="scss" scoped>
.homeLayout{
	
	.themeItem{
		.box{
			height: 340rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			.pic{
				width: 100%;
				height: 100%;
			}
			.mask{
				width: 100%;
				height: 70rpx;
				//#####将文字定位到背景图下面
				position: absolute;
				bottom: 0;
				left: 0;
				//#########################
				background-color: rgba(0,0,0,0.2);
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				//########磨砂半透明##########
				backdrop-filter: blur(20rpx);
				//###########################
				font-weight: 600;
				font-size: 30rpx;
			}
			
			.tab{
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(250,129,90,0.7);
				backdrop-filter: blur(20rpx);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 0 0 20rpx 0;
				font-weight: 600;
				transform: scale(0.8);
				transform-origin: left top;
			}
		}
		
		.box.more{
			.mask{
				width: 100%;
				height: 100%;
				flex-direction: column;
			}
			.text{
				font-size: 28rpx;
			}
		}
	}
	
	.themeItem{
		.box{
			height: 340rpx;
			border-radius: 10rpx;
			overflow:hidden;
			position: relative;
			.pic{
				width: 100%;
				height: 100%;
			}
			.mask{
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom:0;
				left:0;
				background: rgba(0,0,0,0.2);
				color:#fff;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(20rpx);
				font-weight: 600;
				font-size: 30rpx;
			}
			.tab{
				position: absolute;
				left:0;
				top:0;
				background: rgba(250,129,90,0.7);
				backdrop-filter: blur(20rpx);
				color:#fff;
				font-size: 22rpx;
				padding:6rpx 14rpx;
				border-radius: 0 0 20rpx 0;
				transform: scale(0.8);
				transform-origin: left top;
			}
		}
		.box.more{
			.mask{
				width: 100%;
				height: 100%;
				flex-direction: column;
			}
			.text{
				font-size: 28rpx;
			}
		}
	}
	
	.common-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		.name{
			font-size: 40rpx;
		}
	}
	
	.banner{
		width: 750rpx;
		padding: 30rpx 0;
		swiper{
			width: 750rpx;
			height: 340rpx;
			&-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	.notice{
		width: 690rpx;
		height:80rpx;
		background-color: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.uni-icons{
				color: $brand-theme-color;
			}
			.text{
				font-weight: 68;
				font-size: 28rpx;
				color: $brand-theme-color;
				margin-left: 10rpx;
			}
		}
		.center{
			flex: 1;
			padding-top: 20rpx;
			padding-left: 20rpx;
			overflow: hidden;
			swiper{
				height: 100%;
				&-item{
					height: 100%;
					font-size: 30rpx;
					color: #666;
					//超出隐藏
					overflow: hidden;
					//不换行
					white-space: nowrap;
					text-overflow: ellipsis;
				   }
				}
			}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.select{
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		
		.symptomContent{
			height: 200rpx;
			width: 320rpx;
			background: rgb(165, 230, 226);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 40rpx;
			
		}
		
		
		.bookContent{
			width: 320rpx;
			height: 200rpx;
		    background: rgb(206, 219, 246);	
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		
	}
	
	.theme{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			//#####网格#########
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3,1fr);
			//#################
		}
	}
}
</style>
